<template>
  <el-dialog
    v-bind="$attrs"
    @open="handleOpen"
    @close="handleClose"
    bodyStyle="padding:0px;"
  >
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      @current-change="currentChangeHandle"
      :page-size="pageSize"
      :total="totalPage"
      :current-page="pageIndex"
    >
      <el-table :data="tableData" stripe>
        <el-table-column
          prop="auditStep"
          :label="$t('developer.audit_record.audit_step')"
        >
          <template v-slot="{ row }">
            <el-tag>{{ auditStepFilter(row.auditStep) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="auditResult"
          :label="$t('developer.audit_record.audit_result')"
        >
          <template v-slot="{ row }">
            <el-tag
              :type="row.auditResult === 'APPROVED' ? 'success' : 'danger'"
              size="small"
              >{{ auditResultFilter(row.auditResult) }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="creTime" :label="$t('developer.audit_record.audit_time')">
          <template v-slot="{ row }">
            <div :title="timeFilter(row.creTime)">
              {{ dateFilter(row.creTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" :label="$t('developer.audit_record.remark')">
        </el-table-column>
        <el-table-column
          prop="auditUserName"
          :label="$t('developer.audit_record.audit_user_name')"
        >
        </el-table-column>
      </el-table>
    </el-card>
  </el-dialog>
</template>

<script>
import { parseTime } from "@/utils";
import { dateFilter, timeFilter } from "@/filters";
import { getDeveloperAuditRecordList } from "@/api";

export default {
  inheritAttrs: false,
  data() {
    return {
      developerId: "",
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      tableData: [],
    };
  },
  methods: {
    timeFilter,
    dateFilter,
    auditStepFilter(auditStep) {
      const auditStepMap = {
        AREA_EXAMINE: this.$t("developer.audit_record.audit_step_list.area_examine"),
        CERT_EXAMINE: this.$t("developer.audit_record.audit_step_list.cert_examine"),
        ACCOUNT_EXAMINE: this.$t(
          "developer.audit_record.audit_step_list.account_examine"
        ),
      };
      return auditStepMap[auditStep];
    },
    auditResultFilter(auditResult) {
      const auditResultMap = {
        REJECTION: this.$t("developer.audit_record.audit_result_list.rejection"),
        APPROVED: this.$t("developer.audit_record.audit_result_list.approved"),
      };
      return auditResultMap[auditResult];
    },
    handleClose() {
      this.tableData = [];
      this.$emit("update:model-value", false);
    },
    handleOpen() {},
    formatDate(row, column, cellValue, index) {
      return parseTime(cellValue, "{d}/{m}/{y} {h}:{i}:{s}");
    },
    init(developerId) {
      this.developerId = developerId;
      this.pageIndex = 1;
      this.search();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.search();
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.search();
    },
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.search();
    },
    search() {
      getDeveloperAuditRecordList({
        developerId: this.developerId,
        pageNo: this.pageIndex,
        pageSize: this.pageSize,
      })
        .then((res) => {
          this.tableData = res.data;
          this.totalPage = res.rows;
        })
        .catch((e) => {
          this.$confirmError(e);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  height: 86px;
}
::v-deep .el-dialog .el-dialog__body {
  padding: 0;
}
</style>
